<template>
    <div class="main">
        <div class="main-header" v-if="buttons.length">
            <el-button
                v-for="(item, index) in buttons"
                :key="index"
                :type="item.path | formatType"
                :icon="item.icon"
                :disabled="item.path | formatDisabled(selection)"
                @click="tapButton(item)"
                >{{ item.title }}</el-button
            >
        </div>
        <el-table
            ref="table"
            class="main-table"
            :data="adminData"
            height="100%"
            border
            header-cell-class-name="main-table-header"
            @selection-change="onSelectionChange"
            @row-click="onRowClick"
        >
            <el-table-column type="selection" width="39"> </el-table-column>
            <el-table-column align="center" label="头像" prop="avatar">
                <template slot-scope="{ row }">
                    <el-image
                        style="width:50px;height:50px;"
                        fit="contain"
                        :src="row.avatar"
                        :preview-src-list="[row.avatar]"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column align="center" label="用户名" prop="username" />
            <el-table-column align="center" label="昵称" prop="nickname" />
            <el-table-column
                align="center"
                label="权限组"
                prop="group_name_arr"
            >
                <template slot-scope="{ row }">
                    <el-tag
                        type="default"
                        style="margin:0 5px"
                        v-for="(item, index) in row.group_name_arr"
                        :key="index"
                        >{{ item }}</el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column align="center" label="邮箱" prop="email" />
            <el-table-column align="center" label="手机号" prop="mobile" />
            <el-table-column align="center" label="启用状态" prop="status">
                <template slot-scope="{ row }">
                    <el-switch
                        :value="row.status"
                        active-value="1"
                        inactive-value="0"
                    ></el-switch>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="main-pagination"
            :current-page.sync="page"
            :page-size="limit"
            :total="total"
            @current-change="onCurrentChange"
            layout="total,jumper,prev,pager,next"
        ></el-pagination>
        <el-dialog
            :visible.sync="dialogVisible"
            :title="dialogTitle"
            append-to-body
            width="800px"
            @close="onDialogClose"
        >
            <component
                :is="dialogView"
                @update="getAdminData"
                :selection="selection"
                :roleData="roleData"
            ></component>
        </el-dialog>
    </div>
</template>

<script>
import { get, del } from "@/assets/js/http.js";
import Add from "./add.vue";
import Edit from "./edit.vue";

export default {
    name: "view-admin",
    data() {
        return {
            adminData: [],
            selection: [],
            roleData: [],
            page: 1,
            limit: 20,
            total: 0,
            dialogVisible: false,
            dialogTitle: "",
            dialogView: ""
        };
    },
    computed: {
        buttons() {
            return this.$store.state.buttons;
        }
    },
    components: {
        Add,
        Edit
    },
    mounted() {
        this.getAdminData();
        this.getRoleData();
    },
    methods: {
        async getRoleData() {
            const data = await get({
                url: "/admin/auth.group/index",
                loading: true,
                params: {
                    limit: 999,
                    page: 1
                }
            });
            this.roleData = data.list;
        },
        async getAdminData() {
            const data = await get({
                url: "/admin/auth.admin/index",
                loading: true,
                params: {
                    limit: this.limit,
                    page: this.page
                }
            });
            this.adminData = data.list;
            this.total = data.total;
        },
        onCurrentChange(index) {
            this.page = index;
            this.getAdminData();
        },
        onAdd() {
            this.dialogTitle = "新增管理员";
            this.dialogView = "Add";
            this.dialogVisible = true;
        },
        onEdit() {
            this.dialogTitle = "编辑管理员";
            this.dialogView = "Edit";
            this.dialogVisible = true;
        },
        onDelete() {
            this.$confirm(
                `此操作将永久删除该${this.selection.length}个管理员, 是否继续?`,
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            )
                .then(async () => {
                    let query = "?";
                    for (let i = 0; i < this.selection.length; i++) {
                        const item = this.selection[i];
                        if (i > 0) {
                            query += "&ids[]=" + item.id;
                        } else {
                            query += "ids[]=" + item.id;
                        }
                    }
                    await del({
                        url: "/admin/auth.admin/del" + query,
                        successTip: true,
                        loading: true
                    });
                    this.getAdminData();
                })
                .catch(() => {
                    this.$refs.table.clearSelection();
                });
        },
        onSelectionChange(selection) {
            this.selection = selection;
        },
        onRowClick(row) {
            this.$refs.table.toggleRowSelection(row);
        },
        onDialogClose() {
            this.$refs.table.clearSelection();
        },
        tapButton(item) {
            if (item.path === "add") {
                this.onAdd();
            } else if (item.path === "edit") {
                this.onEdit();
            } else if (item.path === "delete") {
                this.onDelete();
            }
        }
    }
};
</script>
